<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .used {
            color: red;
        }

        .noused {
            color: green;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2 <span>hello</span></li>
    <li>3</li>
    <li>4</li>
    <input type="text">
    <button>按钮</button>
    <button id="btn2">按钮2</button>
    <input type="text" id="name"><span id="msg"></span>
    <br>
    <select name="" id="hh">
        <option value="成都">成都</option>
        <option value="上海">上海</option>
        <option value="北京">北京</option>
    </select>
</ul>
</body>
</html>
<script src="../static/js/jquery-1.12.4.min.js"></script>
<script>

    //获取标签中的值 text()
    //alert选中的li标签的值
    $(function () {

        var arr = [11, 22, 33, 44];
        arr.forEach(function (item,index) {
            console.info(index+" "+item)
        })

        $(arr).each(function (index, item) {
            console.info(index+" "+item)
        })

        $("#name").blur(function () {
            var name = "hello";
            var curName = $(this).val();
            if (name == curName) {
                $("#msg").text("该用户已经被注册了");
                $("#msg").removeClass("noused");
                $("#msg").addClass("used");
            } else {
                $("#msg").text("该用户可用");
                $("#msg").removeClass("used");
                $("#msg").addClass("noused");
            }
        })


        $("li").click(function () {
            alert($(this).text());
        })

        //获取input类型，select类型的值或者修改值  val()  val(参数)
        $("button").click(function () {
            //有参数,是把input里面的值修改成参数值
            $(":input").val("你好啊");
            //没有参数，alert弹出input里面的值
            alert($(":input").val());
        })
    })

    //设置select单选框的第一个值  val(参数)
    //把单选框的第一个值设置成上海
    $("#hh").val("上海");


    //增加或者删除标签的属性值
    $("#btn2").click(function () {
        //attr和prop都有属性的意思，prop一般是自带属性
        $(this).attr("name", "123");
        $(this).removeAttr("name");
        $(this).prop("name", "123");
    })


</script>